import {
  Card,
  Breadcrumb,
  Button,
  Form,
  Radio,
  Input,
  Upload,
  Space,
  Select,
  message
} from 'antd'
import { PlusOutlined } from '@ant-design/icons'
import { Link, useNavigate, useSearchParams } from 'react-router-dom'
import './index.scss'
import ReactQuill from 'react-quill'
import 'react-quill/dist/quill.snow.css'
import { useEffect, useState } from 'react'
import { createArticleAPI, getArticleById, updateArticleAPI } from '@/apis/article'
import { useChannel } from '@/pages/hooks/useChannel'

const { Option } = Select

const Publish = () => {
  const { channelList } = useChannel()
  const navigate = useNavigate()
   
  // 上传图片回调
  const [ imageList, setImageList ] = useState([])
  const onChange = async (value) => {
    console.log(value);
    await setImageList(value.fileList)
  }

  // 切换图片封面类型
  const [ imageType, setImageType ] = useState(1)
  const onTypeChange = (e) => {
    // console.log(e.target.value);
    setImageType(e.target.value)
  }

  // 发布文章确认回调
  const onFinish = (values) => {
    // console.log(values);
    const { title, content, channel_id} = values
    // 按照接口文档的数据格式处理数据
    const reqData = {
      title: title,
      content: content,
      cover: {
        type: imageType,
        // 回填和上传的图片列表数据格式不一样，需要判断
        images: imageList.map(item => {
          if(item.response){
            return item.response.data.url
          }else {
            return item.url
          }
        })
      },
      channel_id: channel_id
    }
    if(articleId){
      // 更新
      updateArticleAPI({ ...reqData, id: articleId })
      message.success('更新文章成功!')
      navigate('/article')
    }else{
      // 调用接口提交
      createArticleAPI(reqData)
    }
  }

  // 编辑文章数据回填
  // 获取路由信息
  const [ searchParams] = useSearchParams()
  const articleId = searchParams.get('id')
  // console.log(articleId);
  // 获取form实例
  const [ form ] = Form.useForm()
  useEffect(() => {
    // 通过id获取文章信息
    async function getArticleDetail(){
      const res = await getArticleById(articleId)
      const data = res.data
      const { cover } = data
      // 调用Form组件实例方法setFieldValue回显数据
      form.setFieldsValue({
        ...data,
        type: cover.type
      })
      // 回填图片类型
      setImageType(cover.type)
      // 回填图片列表
      setImageList(cover.images.map(url => { return { url }}))
    }
    // 编辑文章时调用
    if(articleId){
      getArticleDetail()
    }
  }, [articleId, form])
  return(
      <div className="publish">
        <Card title={
          <Breadcrumb items={[
            { title: <Link to={'/'}>首页</Link>},
            { title: articleId ? '编辑文章' : '发布文章'}
          ]}/>
        }>
          <Form
            labelCol={{ span: 4}}
            wrapperCol={{ span: 16}}
            initialValues={{ type: 1 }}
            onFinish={onFinish}
            form={form}>
              <Form.Item
                label='标题'
                name='title'
                rules={[{ required: true, message: '请输入文章标题'}]}>
                  <Input placeholder='请输入文章标题' style={{width: '400px'}}/>
              </Form.Item>
              <Form.Item
                label='频道'
                name='channel_id'
                rules={[{ required: true, message: '请输入文章频道'}]}>
                  <Select placeholder='请输入文章频道' defaultValue='推荐' style={{width: '400px'}}>
                    {/* value属性用户选择之后会自动收集起来作为接口的提交字段 */}
                    {channelList.map(item => <Option key={item.key} value={item.id}>{item.name}</Option>)}
                  </Select>
              </Form.Item>
              <Form.Item label='封面'>
                <Form.Item name='type'>
                  <Radio.Group onChange={onTypeChange}>
                    <Radio value={1}>单图</Radio>
                    <Radio value={3}>多图</Radio>
                    <Radio value={0}>无图</Radio>
                  </Radio.Group>
                </Form.Item>
                {imageType > 0 &&  
                  <Upload
                    name='image'
                    listType='picture-card' 
                    showUploadList
                    maxCount={imageType}
                    multiple
                    action={'http://geek.itheima.net/v1_0/upload'}
                    onChange={onChange}
                    fileList={imageList}>
                    <div style={{ marginTop: 8 }}>
                      <PlusOutlined/>
                    </div>
                  </Upload>
                }
              </Form.Item>
              <Form.Item
                label='内容'
                name='content'
                rules={[{ required: true, message: '请输入文章内容'}]}>
                  {/* 富文本编辑器 */}
                  <ReactQuill
                    className='publish-quill'
                    theme='snow'
                    placeholder='请输入文章内容'>
                  </ReactQuill>
              </Form.Item>
              <Form.Item wrapperCol={{ offset: 4 }}>
                <Space>
                  <Button size='large' type='primary' htmlType='submit'>发布文章</Button>
                </Space>
              </Form.Item>
          </Form>
        </Card>
      </div>
  )
}

export default Publish